<template>
  <div class="container">
    <el-page-header @back="goBack" content="客户组日志"></el-page-header>
    <el-row type="flex" justify="space-between" class="nav-bar">
      <el-col class="text-right">
        <el-form ref="form" :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item label="日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="search.date"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-form-item>
         <el-form-item label="动作类型">
              <el-select v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input placeholder="以姓名/中文表名检索" v-model="search.key"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column fixed prop="createusername" label="操作人" width="100">
      </el-table-column>
      <el-table-column fixed prop="type" label="动作" width="100">
      </el-table-column>
      <el-table-column prop="createdatetime" label="操作时间" width="160">
      </el-table-column>
      <el-table-column prop="ctablename" label="中文表名" width="200">
      </el-table-column>
      <el-table-column prop="etablename" label="英文表名" width="200">
      </el-table-column>
      <el-table-column prop="zhcolumnname" label="中文字段名" width="150">
      </el-table-column>
      <el-table-column prop="columnname" label="字段名" width="150">
      </el-table-column>
      <el-table-column prop="currentvalue" label="当前值"  >
      </el-table-column>
      <el-table-column prop="originalvalue" label="原始值"  >
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="search.PageSize" :current-page="search.PageIndex" @current-change="pageChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '客户组日志-' + this.websetting.name,
      }
    },
    data() {
      return {
        loading: false,
        total: 0,
        search: {
          date:'',
          logtype:'',
          key: '',
          PageIndex: 1,
          PageSize: 10,
          order: [{
            Column: 'createddatetime',
            IsDesc: true
          }]
        },
        tableData: [],
        options:[
          {value:'新增',lable:'新增'},
          {value:'删除',lable:'删除'},
          {value:'编辑',lable:'编辑'},
        ],
        value:'',
      }
    },
   watch: {
     value(newValue, oldValue) {
       this.search.logtype=newValue;
       this.getList();
     },
     'search.date'(){
       //this.search.TypeIds=newValue;
       this.getList();
     }
   },
    mounted() {
      this.getList()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      searchData() {
        this.search.PageIndex = 1;
        this.search.PageSize = 10;
        this.getList();
      },
      getList() {
        this.loading = true
        this.$axios.post('/enterprise/LogList', this.search).then((res) => {
          this.loading = false
          this.tableData = res.rows;
          this.total = res.total;
        }).catch((err) => {
          this.loading = false;
        })
      },
      pageChange(e) { // 页码切换事件
        this.search.PageIndex = e;
        this.getList();
      },
      handleSizeChange(val) {
        this.search.PageIndex = 1;
        this.search.PageSize = val;
        this.getList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .nav-bar {
    padding: 15px 0 0;
  }

  .send {
    margin-top: 15px;
    margin-right: 10px;
  }

  .dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
      float: left;

      &.all {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }
    }
  }

  .type-state {
    display: flex;
    padding: 30px 0 0;
    width: 100%;
    border-bottom: 2px solid var(--light);
    margin-bottom: 10px;

    span {
      color: var(--gray);
      margin-right: 40px;
      position: relative;
      height: 35px;
      cursor: pointer;

      &.on {
        color: #000;

        &:after {
          content: '';
          width: 100%;
          height: 2px;
          background: var(--red);
          position: absolute;
          bottom: -2px;
          left: 0;
        }
      }
    }
  }

  .send-msg-box {
    &>div {
      padding-bottom: 15px;
      border-bottom: 1px dashed #dbdbdb;
      margin-bottom: 15px;
    }
  }

  .signet-list {
    display: flex;
    flex-wrap: wrap;

    // align-items: center;
    // justify-content: center;
    .con {
      cursor: pointer;

      &.on .img {
        border: 2px solid var(--blue);
        box-sizing: border-box;
      }

      position: relative;
      margin-right: 15px;
      margin-bottom: 15px;
      margin-left: 15px;

      .img {
        width: 198px;
        height: 198px;
        display: block;
        border: 1px solid #f1f1f1;
      }

      .title {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 35px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        line-height: 35px;
      }
    }
  }

  .contract-details {

    .contract-head {
      display: flex;

      .item {
        flex: 1;

        .tl {
          font-size: 12px;
          color: var(--gray);
        }

        .text {
          font-size: 14px;
        }
      }
    }

    .iframe-item {
      flex: 1;
    }

    .text-item {
      width: 400px;
      padding: 0 30px 30px 30px;

      .record-content {
        // height: 745px;
        overflow-y: auto;
      }
    }

    .contract-foot {
      width: 215px;
      // height: 800px;
      overflow: auto;
      padding-left: 15px;

      .choose-view {
        padding: 30px 0;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 160px;
          height: 210px;
          text-align: center;
          box-shadow: 0 0 6px #ccc;
          position: relative;
          margin-right: 15px;
          margin-bottom: 50px;
          cursor: pointer;
          background-size: cover;
          background-position: 0 0;

          .con {
            display: block;
            height: 100%;
            background-size: contain;
            background-position: center;
          }

          .title {
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 18px;
            color: #000 !important;
            position: absolute;
            top: 30px;
            left: 0;
          }

          .state {
            height: 30px;
            // line-height: 30px;
            position: absolute;
            bottom: -40px;
            width: 100%;

            &.warning {
              color: var(--warning);
            }

            &.danger {
              color: var(--danger);
            }

            &.success {
              color: var(--success);
            }
          }

          .icon-box {
            margin-bottom: 10px;
            position: relative;
            margin-top: 15px;

            .add-ico {
              width: 64px;
              height: 64px;
              display: block;
              margin: 100px auto 0;
              color: #d3d3d3;
              font-size: 70px;
              font-weight: initial;
            }
          }
        }
      }
    }
  }
</style>
